<template>
  <div class="page page-nav-wrapper">
    <el-card class="nav-card" v-for="(item,index) in NavList" :key="index">
      <template #header>
        <b class="nav-header">
          {{ item.type }}
        </b>
      </template>
      <el-row class="nav-row">
        <el-col :xl="3" :lg="4" :md="4" :sm="8" :xs="12" v-for="(child,index) in item.list" :key="index" class="nav-col">
          <a :href="child.url" :title="child.text" target="_blank"  class="row-a">
            <img v-if="child.icon" :src="child.icon" alt="" class="icon">
            <span>{{ child.text }}</span>
          </a>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup>
import NavList from './data'
</script>

<style lang="scss" scoped>
.page-nav-wrapper {
  padding: 20px 5%;
}
.nav-card {
  margin-bottom: 10px;
}
.nav-header {
  font-size: 16px;
}
.nav-row {
  .row-a {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-size: 14px;
    color: #333;
    &:hover {
      color: #0059b2;
      text-decoration: underline;
    }
    .icon {
      width: 20px;
      height: 20px;
      margin-right: 5px;
    }
  }
}
</style>